<template>
  <div class="da">
    <div class="top">
      <el-row :gutter="20">
        <el-col :span="1"></el-col>
        <el-col :span="22">
          <el-card
            class="box-card"
            v-for="props in types"
            :key="props"
            @click="tanchu(props)"
          >
            <div class="title">
              <h4>{{ props.departmentName }}</h4>
            </div>
            <el-divider />
            <div v-for="shuju in props.children" :key="shuju">
              <div class="xiao">{{ shuju.departmentName }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </div>

    <el-dialog v-model="dialogVisible" :title="props.departmentName">
      <el-table :data="props.children" style="width: 100%" v-show="props">
        <el-table-column
          prop="departmentName"
          label="门诊"
          width="600"
        /><el-table-column fixed="right" label="操作" width="100">
          <template #default="row">
            <el-button type="primary" round @click="xuanze(row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog v-model="centerDialogVisible" width="65%" center @close="shuxin">
      <h1>{{ title }}</h1>
      <el-row :gutter="20">
        <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
        <el-col :span="22"
          ><template v-for="time in week" :key="time">
            <el-button size="large" class="time" @click="piqi(time.ts)" v-if="weeks.indexOf(time.xq)<currentDay-1" disabled
              >{{ time.ts }}<br />{{ time.xq }}</el-button>
             <el-button size="large" type="primary" plain @click="piqi(time.ts)" v-if="weeks.indexOf(time.xq)==currentDay-1" 
              >{{ time.ts }}<br />111{{ time.xq }}</el-button>
            <el-button size="large" class="time" @click="piqi(time.ts)" v-if="weeks.indexOf(time.xq)>currentDay-1" 
              >{{ time.ts }}<br />{{ time.xq }}</el-button>
          </template></el-col
        >
        <el-col :span="1"><div class="grid-content bg-purple" /></el-col>
      </el-row>

      <el-dialog v-model="innerVisible" width="25%" title="挂号" append-to-body>
        <el-form label-width="120px">
          <el-form-item label="日期:">
            {{ Edit.day }}
          </el-form-item>
          <el-form-item label="医生:">
            {{ Edit.docName }}
          </el-form-item>
          <el-form-item label="类型:">
            {{ Edit.feeName }} :{{ Edit.money }}元
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input
              v-model="patient.real_name"
              placeholder="请输入患者姓名"
            />
          </el-form-item>
          <el-form-item label="电话:">
            <el-input
              v-model="patient.telephone"
              placeholder="请输入患者电话"
            />
          </el-form-item>
          <el-form-item label="身份证:">
            <el-input
              v-model="patient.patient_id"
              placeholder="请输入患者身份证号"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="success" round @click="queren">确认</el-button>
          </span>
        </template>
      </el-dialog>
      <div class="guahao">
        <el-table
          :data="guahao"
          style="width: 100%"
          v-if="guahao != null && guahao != {}"
        >
          <el-table-column prop="img" width="100">
            <!--插入图片链接的代码-->
            <template #default="row">
              <el-image :src="row.row.img" style="width: 70px; height: 70px" />
            </template>
          </el-table-column>

          <el-table-column prop="docName" label="姓名" width="120" />
          <el-table-column prop="amwork" label="上午科室" width="120" />
          <el-table-column prop="pmwork" label="下午科室" width="120" />
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="row">
              <el-button type="primary" round @click="guahao1(row)" v-if="row.row.countLeft==0" disabled
                >挂号</el-button>
              <el-button type="primary" round @click="guahao1(row)" v-if="row.row.countLeft>0" 
                >挂号</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="余号" width="100">
            <template #default="row2">
              <el-button type="success" round>{{
                row2.row.countLeft
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="详情" width="100">
            <template #default="row3">
              <el-button
                type="warning"
                round
                @click="showIntroduction(row3.row.introduction)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage,ElMessageBox } from "element-plus";
import { get } from "@/utils/request";
export default {
  name: "infoIndex",
  inject: ["reload"],
  data() {
    return {
      types: [],
      centerDialogVisible: false,
      dialogVisible: false,
      title: "",
      week: [],
      doctor: [],
      keshi: [],
      departmentId: "",
      guahao: [],
      innerVisible: false,
      Edit: [],
      patient: {
        patient_id: sessionStorage.patient_id,
        telephone: sessionStorage.telephone,
        real_name: sessionStorage.real_name,
      }, //患者
      props: [],
      currentDay:0,
      currentDate:"",
      weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    };
  },
  mounted() {
    this.getAllDepartments();   
    this.getWeek();
    this.getCurrDay();
  },
  methods: {
    getAllDepartments(){
       get("/getAllDepartments").then((res) => {
      this.types = res.data.data;
       });
    },
    xuanze(row) {
      this.centerDialogVisible = true;
      this.title = row.row.departmentName;
      this.departmentId = row.row.departmentId;
      get("/getDoctorsId", {
        departId2: row.row.departmentId,
      }).then((res) => {
        this.doctor = res.data.data;
      });
      this.piqi(this.currentDate);
    },
    getCurrDay(){
      var currentTime = new Date();
      this.currentDay= currentTime.getDay(); //当前周的第几天
      this.currentDate=this.week[this.currentDay-1];//休整    
    },
    getWeek() {
      var currentTime = new Date();
      var nowDayOfWeek = currentTime.getDay(); //当前周的第几天
      var nowDay = currentTime.getDate(); //当前日
      var nowMonth = currentTime.getMonth(); //当前月
      var nowYear = currentTime.getFullYear(); //当前年
      currentTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1); //完整日期    
      for (var i = 0; i < 7; i++) {
        if (i == 0) {
          currentTime = currentTime.setDate(currentTime.getDate());
        } else {
          currentTime = currentTime.setDate(currentTime.getDate() + 1);
        }
        currentTime = new Date(currentTime);
        var currentDays = currentTime.getDate();
        var currentMon = currentTime.getMonth() + 1;
        currentMon = this.doHandleMonth(currentMon);
        currentDays = this.doHandleMonth(currentDays);
        var dateDay = currentDays; //某一天
        var dates = {};
        this.currenttime = currentMon + "-" + nowDay;
        dates.Monthday = currentMon + "-" + dateDay;
        dates.xq = this.weeks[i];
        dates.ts = nowYear + "-" + currentMon + "-" + currentDays;
        this.week.push(dates);
      }
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    piqi(data) {
      get("/getRegistration", {
        day: data,
        departId2: this.departmentId,
      }).then((res) => {
        this.guahao = res.data.data;
        for (var i = 0; i < this.guahao.length; i++) {
          if (this.guahao[i].amwork == "0") this.guahao[i].amwork = "休息";
          if (this.guahao[i].pmwork == "0") this.guahao[i].pmwork = "休息";
        }
      });
    },
    shuxin() {
      this.reload();
    },
    guahao1(row) {
      this.Edit = row.row;
      this.innerVisible = true;
    },
    queren() {
      this.innerVisible = false;
      this.dialogVisible = false;
      get("/addPatientDoctor", {
        day: this.Edit.day,
        departId2: this.Edit.departId2,
        docId: this.Edit.docId,
        name: this.patient.real_name,
        patientId: this.patient.patient_id,
        telephone: this.patient.telephone,
      })
        .then((res) => {
          ElMessage({
            message: "挂号成功",
            type: "success",
          });
          this.dialogVisible=false;
          this.centerDialogVisible=false;
        })
        .catch(() => {
          ElMessage.error("挂号失败，请输入相应的信息");
        });
      this.patient = [];
    },

    tanchu(props) {
      this.dialogVisible = true;
      this.props = props;
      console.log(this.props);
    },
    showIntroduction(data) {
       ElMessageBox.alert(data, '个人介绍', {
    confirmButtonText: 'OK'
    })
  }
  }
};
</script>

<style lang="scss" scoped>
.top {
  margin-top: 15px;
}

.guahao {
  margin-top: 25px;
  margin-left: 65px;
}
.dialog-footer {
  margin-top: 5px;
}
.da {
  width: 100%;
}
.box-card {
  width: 22%;
  margin-left: 25px;
  margin-top: 15px;
  height: 120px;
  float: left;
  cursor: pointer;
}
.box-card:hover {
  background-color: rgb(82, 142, 181);
  color: rgb(251, 251, 251);
  .title {
    color: rgb(251, 251, 251);
  }
}
.title {
  color: rgb(82, 173, 219);
  margin-top: -20px;
}
.xiao {
  float: left;
  margin-left: 5px;
  margin-top: -5px;
  font-style: -3px;
  font-size: 13px;
}
</style>
